<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国传统爱好探索 | Traditional Chinese Hobbies</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --ink-dark: #2d2a2e;
            --ink-light: #8a868c;
            --paper: #f9f4e9;
            --paper-dark: #e8e0d0;
            --accent-red: #c03a2b;
            --accent-gold: #d4af37;
            --shadow: rgba(0, 0, 0, 0.1);
        }
        
        body {
            background: linear-gradient(to bottom, #f9f4e9, #e8e0d0);
            color: var(--ink-dark);
            font-family: 'Noto Serif SC', serif;
            line-height: 1.8;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="0.03"><path d="M40,40 Q80,20 120,40 T200,40 M40,80 Q80,60 120,80 T200,80 M40,120 Q80,100 120,120 T200,120 M40,160 Q80,140 120,160 T200,160" stroke="black" fill="none"/></svg>');
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            text-align: center;
            padding: 2.5rem 0 1.5rem;
            position: relative;
            margin-bottom: 2rem;
        }
        
        header::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 3px;
            background: linear-gradient(to right, transparent, var(--ink-dark), transparent);
        }
        
        .title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 3.5rem;
            color: var(--ink-dark);
            text-shadow: 3px 3px 6px var(--shadow);
            margin-bottom: 1rem;
            letter-spacing: 5px;
        }
        
        .subtitle {
            font-size: 1.4rem;
            color: var(--ink-light);
            font-weight: 400;
            margin-bottom: 2rem;
        }
        
        .language-switch {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 1.5rem 0 2.5rem;
        }
        
        .language-btn {
            background: transparent;
            color: var(--ink-dark);
            border: 2px solid var(--ink-dark);
            padding: 10px 25px;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.4s ease;
            font-family: 'Noto Serif SC', serif;
            position: relative;
            overflow: hidden;
        }
        
        .language-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--ink-dark);
            transform: translateY(100%);
            transition: transform 0.4s ease;
            z-index: -1;
        }
        
        .language-btn:hover {
            color: var(--paper);
        }
        
        .language-btn:hover::before {
            transform: translateY(0);
        }
        
        .intro-section {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            padding: 2.5rem;
            margin: 2rem auto;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            position: relative;
            border: 1px solid rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(5px);
        }
        
        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 1.8rem;
            color: var(--accent-red);
            font-weight: 700;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 20px;
        }
        
        .section-title::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, transparent, var(--accent-red), transparent);
        }
        
        .intro-content {
            font-size: 1.15rem;
            line-height: 1.9;
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--ink-dark);
        }
        
        .intro-content p {
            margin-bottom: 1.2rem;
        }
        
        .voice-control {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        .voice-btn {
            background: var(--ink-dark);
            color: var(--paper);
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Noto Serif SC', serif;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .voice-btn:hover {
            background: var(--accent-red);
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .hobby-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 35px;
            margin: 3rem 0;
        }
        
        .hobby-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .hobby-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .hobby-image {
            height: 220px;
            width: 100%;
            object-fit: cover;
            border-bottom: 2px solid var(--accent-red);
        }
        
        .hobby-content {
            padding: 1.8rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .hobby-title {
            color: var(--ink-dark);
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }
        
        .hobby-title::after {
            content: "";
            flex-grow: 1;
            height: 1px;
            background: linear-gradient(to right, var(--accent-red), transparent);
        }
        
        .hobby-desc {
            margin-bottom: 1.5rem;
            font-size: 1.05rem;
            line-height: 1.8;
            color: var(--ink-dark);
        }
        
        .quiz-section {
            background: rgba(232, 224, 208, 0.5);
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.2rem;
            border-left: 3px solid var(--accent-gold);
        }
        
        .quiz-question {
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--ink-dark);
            font-size: 1.1rem;
        }
        
        .quiz-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 15px;
        }
        
        .quiz-option {
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            font-size: 0.95rem;
        }
        
        .quiz-option:hover {
            border-color: var(--accent-red);
            background: #fffaf0;
        }
        
        .quiz-option.selected {
            border-color: var(--accent-gold);
            background: rgba(212, 175, 55, 0.1);
        }
        
        .quiz-feedback {
            min-height: 30px;
            font-weight: bold;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            margin-top: 10px;
            transition: all 0.3s ease;
        }
        
        .correct {
            background: rgba(39, 174, 96, 0.1);
            color: #27ae60;
            border: 1px dashed #27ae60;
        }
        
        .incorrect {
            background: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
            border: 1px dashed #e74c3c;
        }
        
        .hobby-voice {
            margin-top: auto;
            display: flex;
            gap: 12px;
            justify-content: center;
            padding-top: 15px;
        }
        
        .small-voice-btn {
            background: var(--ink-dark);
            color: white;
            border: none;
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .small-voice-btn:hover {
            background: var(--accent-red);
        }
        
        footer {
            text-align: center;
            margin-top: 3rem;
            color: var(--ink-light);
            font-size: 1rem;
            padding: 25px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        /* Ink Blot Decoration */
        .ink-blot {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(45,42,46,0.05) 0%, rgba(45,42,46,0) 70%);
            border-radius: 50%;
            z-index: -1;
        }
        
        .blot-1 {
            top: 5%;
            left: 5%;
        }
        
        .blot-2 {
            bottom: 10%;
            right: 5%;
            width: 200px;
            height: 200px;
        }
        
        /* Animation for voice buttons */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .speaking {
            animation: pulse 1.2s infinite;
            background: var(--accent-red) !important;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .hobby-grid {
                grid-template-columns: 1fr;
            }
            
            .quiz-options {
                grid-template-columns: 1fr;
            }
            
            .title {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 1.2rem;
            }
            
            .intro-section {
                padding: 1.8rem;
            }
        }
        
        /* Seal Stamps */
        .seal {
            position: absolute;
            opacity: 0.2;
            font-family: 'Ma Shan Zheng', cursive;
            transform: rotate(-15deg);
            font-size: 5rem;
            color: var(--accent-red);
            z-index: -1;
        }
        
        .seal-1 {
            top: 50px;
            left: 50px;
        }
        
        .seal-2 {
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <div class="ink-blot blot-1"></div>
    <div class="ink-blot blot-2"></div>
    <div class="seal seal-1">傳統</div>
    <div class="seal seal-2">文化</div>
    
    <header>
        <div class="container">
            <h1 class="title chinese">中国传统爱好探索</h1>
            <h1 class="title english" style="display:none;">Traditional Chinese Hobbies</h1>
            <p class="subtitle chinese">发现五千年文化的魅力</p>
            <p class="subtitle english" style="display:none;">Discover the Charm of Five Thousand Years of Culture</p>
            
            <div class="language-switch">
                <button id="chineseBtn" class="language-btn">中文</button>
                <button id="englishBtn" class="language-btn">English</button>
            </div>
        </div>
    </header>
    
    <div class="container">
        <section class="intro-section">
            <h2 class="section-title chinese">文化之旅</h2>
            <h2 class="section-title english" style="display:none;">Cultural Journey</h2>
            
            <div class="intro-content chinese">
                <p>中国文化有着五千多年的悠久历史，充满了丰富多彩的传统爱好。这些活动不仅是娱乐方式，还蕴含着深厚的哲学思想和艺术价值。</p>
                <p>在这趟探索之旅中，你将了解围棋、书法、剪纸、茶艺、二胡、琵琶和京剧等传统爱好。每种爱好都有独特的魅力，展示了中国人民的智慧和创造力。</p>
                <p>准备好开始这段奇妙的文化之旅了吗？让我们一起探索这些美妙的传统艺术吧！</p>
            </div>
            
            <div class="intro-content english" style="display:none;">
                <p>Chinese culture has a long history of over 5,000 years, filled with rich traditional hobbies. These activities are not just forms of entertainment, but also contain profound philosophical ideas and artistic value.</p>
                <p>In this exploration journey, you will learn about traditional hobbies like Weiqi, Calligraphy, Paper Cutting, Tea Art, Erhu, Pipa, and Peking Opera. Each hobby has unique charm, showcasing the wisdom and creativity of Chinese people.</p>
                <p>Are you ready to start this wonderful cultural journey? Let's explore these beautiful traditional arts together!</p>
            </div>
            
            <div class="voice-control">
                <button id="introChineseVoice" class="voice-btn">
                    <span class="chinese">聆听中文介绍</span>
                    <span class="english" style="display:none;">Listen in Chinese</span>
                </button>
                <button id="introEnglishVoice" class="voice-btn">
                    <span class="chinese">听英文介绍</span>
                    <span class="english" style="display:none;">Listen in English</span>
                </button>
            </div>
        </section>
        
        <div class="hobby-grid">
            <!-- 围棋 -->
            <div class="hobby-card">
                <img src="图6.jpg" alt="围棋" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">围棋 <span class="english" style="display:none;">Weiqi</span></h3>
                    <div class="hobby-desc chinese">
                        <p>围棋是世界上最古老的棋类游戏之一，有4000多年历史。它使用黑白棋子在19×19的棋盘上进行。围棋不仅是一个游戏，更是一种战略思维的艺术。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>Weiqi is one of the oldest board games in the world, with over 4,000 years of history. It uses black and white stones on a 19×19 grid board. Weiqi is not just a game, but an art of strategic thinking.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">围棋棋盘有多少个交叉点？</div>
                        <div class="quiz-question english" style="display:none;">How many intersections are on a Weiqi board?</div>
                        <div class="quiz-options">
                            <div class="quiz-option" data-correct="true">361</div>
                            <div class="quiz-option">400</div>
                            <div class="quiz-option">324</div>
                            <div class="quiz-option">256</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 书法 -->
            <div class="hobby-card">
                <img src="图7.jpg" alt="书法" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">书法 <span class="english" style="display:none;">Calligraphy</span></h3>
                    <div class="hobby-desc chinese">
                        <p>书法是用毛笔书写汉字的艺术形式。它讲究笔画的力度、节奏和美感。练习书法可以让人心平气和，培养专注力，是中国人修身养性的重要方式。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>Calligraphy is the art of writing Chinese characters with a brush. It emphasizes the strength, rhythm and beauty of strokes. Practicing calligraphy can calm the mind, cultivate concentration, and is an important way for Chinese people to cultivate themselves.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">书法通常使用什么工具书写？</div>
                        <div class="quiz-question english" style="display:none;">What tool is commonly used in calligraphy?</div>
                        <div class="quiz-options">
                            <div class="quiz-option">钢笔</div>
                            <div class="quiz-option" data-correct="true">毛笔</div>
                            <div class="quiz-option">铅笔</div>
                            <div class="quiz-option">马克笔</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 剪纸 -->
            <div class="hobby-card">
                <img src="图5.jpg" alt="剪纸" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">剪纸 <span class="english" style="display:none;">Paper Cutting</span></h3>
                    <div class="hobby-desc chinese">
                        <p>剪纸是中国民间艺术，用剪刀或刻刀在纸上剪出各种图案。常见于节日装饰，特别是春节。剪纸图案多样，包括动物、花卉和吉祥文字，表达美好祝愿。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>Paper cutting is a Chinese folk art that uses scissors or knives to cut various patterns on paper. It's commonly seen in festival decorations, especially during Chinese New Year. The patterns include animals, flowers and auspicious words, expressing good wishes.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">剪纸最常在哪个节日使用？</div>
                        <div class="quiz-question english" style="display:none;">During which festival is paper cutting most commonly used?</div>
                        <div class="quiz-options">
                            <div class="quiz-option">中秋节</div>
                            <div class="quiz-option" data-correct="true">春节</div>
                            <div class="quiz-option">端午节</div>
                            <div class="quiz-option">元宵节</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 茶艺 -->
            <div class="hobby-card">
                <img src="图4.jpg" alt="茶艺" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">茶艺 <span class="english" style="display:none;">Tea Art</span></h3>
                    <div class="hobby-desc chinese">
                        <p>茶艺是泡茶和品茶的艺术。它起源于中国，已有数千年历史。茶艺不仅仅是泡茶，更是一种生活态度，讲究"和、敬、清、寂"的精神。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>Tea art is the art of brewing and tasting tea. Originating in China, it has a history of thousands of years. Tea art is not just about making tea, but also a life attitude that emphasizes the spirit of "harmony, respect, purity, and tranquility".</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">茶艺起源于哪个国家？</div>
                        <div class="quiz-question english" style="display:none;">Which country did tea art originate from?</div>
                        <div class="quiz-options">
                            <div class="quiz-option" data-correct="true">中国</div>
                            <div class="quiz-option">日本</div>
                            <div class="quiz-option">印度</div>
                            <div class="quiz-option">英国</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 二胡 -->
            <div class="hobby-card">
                <img src="图2.jpg" alt="二胡" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">二胡 <span class="english" style="display:none;">Erhu</span></h3>
                    <div class="hobby-desc chinese">
                        <p>二胡是中国传统弦乐器，有两根弦。它用弓拉奏，音色柔美而富有表现力。二胡可以演奏各种情感的音乐，从欢快到悲伤。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>The Erhu is a traditional Chinese string instrument with two strings. Played with a bow, it has a soft and expressive tone. The Erhu can play various emotional music, from joyful to sad.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">二胡有几根弦？</div>
                        <div class="quiz-question english" style="display:none;">How many strings does an Erhu have?</div>
                        <div class="quiz-options">
                            <div class="quiz-option">1根</div>
                            <div class="quiz-option" data-correct="true">2根</div>
                            <div class="quiz-option">3根</div>
                            <div class="quiz-option">4根</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 琵琶 -->
            <div class="hobby-card">
                <img src="图3.jpg" alt="琵琶" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">琵琶 <span class="english" style="display:none;">Pipa</span></h3>
                    <div class="hobby-desc chinese">
                        <p>琵琶是有着2000多年历史的中国传统弹拨乐器。它有四根弦，梨形音箱，可以演奏快速流畅的旋律，也能表达细腻的情感。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>The Pipa is a traditional Chinese plucked instrument with over 2,000 years of history. It has four strings and a pear-shaped body, capable of playing fast, smooth melodies as well as expressing delicate emotions.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">琵琶的琴身是什么形状？</div>
                        <div class="quiz-question english" style="display:none;">What shape is the Pipa's body?</div>
                        <div class="quiz-options">
                            <div class="quiz-option">圆形</div>
                            <div class="quiz-option" data-correct="true">梨形</div>
                            <div class="quiz-option">方形</div>
                            <div class="quiz-option">三角形</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 京剧 -->
            <div class="hobby-card">
                <img src="图1.jpg" alt="京剧" class="hobby-image">
                <div class="hobby-content">
                    <h3 class="hobby-title">京剧 <span class="english" style="display:none;">Peking Opera</span></h3>
                    <div class="hobby-desc chinese">
                        <p>京剧是中国国粹，有200多年历史。它融合了唱、念、做、打等表演形式。京剧演员使用鲜艳的脸谱表示不同角色，非常容易辨认。</p>
                    </div>
                    <div class="hobby-desc english" style="display:none;">
                        <p>Peking Opera is China's national treasure with over 200 years of history. It combines singing, reciting, acting, and acrobatics. Performers use colorful facial makeup to represent different characters, making them easily recognizable.</p>
                    </div>
                    
                    <div class="quiz-section">
                        <div class="quiz-question chinese">京剧演员使用什么来区分角色？</div>
                        <div class="quiz-question english" style="display:none;">What do Peking Opera performers use to distinguish characters?</div>
                        <div class="quiz-options">
                            <div class="quiz-option">不同的帽子</div>
                            <div class="quiz-option">不同的鞋子</div>
                            <div class="quiz-option" data-correct="true">鲜艳的脸谱</div>
                            <div class="quiz-option">特殊的手套</div>
                        </div>
                        <div class="quiz-feedback"></div>
                    </div>
                    
                    <div class="hobby-voice">
                        <button class="small-voice-btn chinese-voice">
                            <span class="chinese">听中文</span>
                            <span class="english" style="display:none;">Chinese</span>
                        </button>
                        <button class="small-voice-btn english-voice">
                            <span class="chinese">听英文</span>
                            <span class="english" style="display:none;">English</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <div class="container">
            <p class="chinese">探索中国传统爱好，感受中华文化魅力！</p>
            <p class="english" style="display:none;">Explore traditional Chinese hobbies and experience the charm of Chinese culture!</p>
        </div>
    </footer>
    
    <script>
        // 语言切换功能
        document.getElementById('chineseBtn').addEventListener('click', function() {
            document.querySelectorAll('.chinese').forEach(el => el.style.display = 'block');
            document.querySelectorAll('.english').forEach(el => el.style.display = 'none');
        });
        
        document.getElementById('englishBtn').addEventListener('click', function() {
            document.querySelectorAll('.chinese').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.english').forEach(el => el.style.display = 'block');
        });
        
        // 语音合成功能
        function speakText(text, lang) {
            if ('speechSynthesis' in window) {
                // 停止当前正在播放的语音
                window.speechSynthesis.cancel();
                
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = lang;
                
                // 设置中文语音参数
                if (lang === 'zh-CN') {
                    utterance.rate = 0.9;
                    utterance.pitch = 1.1;
                }
                
                // 设置英语语音参数
                if (lang === 'en-US') {
                    utterance.rate = 0.95;
                    utterance.pitch = 1.05;
                }
                
                // 添加speaking类
                const activeButton = event.target.closest('button');
                if (activeButton) {
                    activeButton.classList.add('speaking');
                    
                    utterance.onend = function() {
                        activeButton.classList.remove('speaking');
                    };
                }
                
                window.speechSynthesis.speak(utterance);
            } else {
                alert('您的浏览器不支持语音合成功能，请使用Chrome、Edge或Safari浏览器。');
            }
        }
        
        // 总介绍语音
        document.getElementById('introChineseVoice').addEventListener('click', function() {
            const text = document.querySelector('.intro-section .chinese').innerText;
            speakText(text, 'zh-CN');
        });
        
        document.getElementById('introEnglishVoice').addEventListener('click', function() {
            const text = document.querySelector('.intro-section .english').innerText;
            speakText(text, 'en-US');
        });
        
        // 每个爱好的语音
        document.querySelectorAll('.chinese-voice').forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('.hobby-card');
                const text = card.querySelector('.hobby-desc.chinese').innerText;
                speakText(text, 'zh-CN');
            });
        });
        
        document.querySelectorAll('.english-voice').forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('.hobby-card');
                const text = card.querySelector('.hobby-desc.english').innerText;
                speakText(text, 'en-US');
            });
        });
        
        // 答题游戏功能
        document.querySelectorAll('.quiz-option').forEach(option => {
            option.addEventListener('click', function() {
                const quiz = this.closest('.quiz-section');
                const feedback = quiz.querySelector('.quiz-feedback');
                
                // 移除之前的选择
                quiz.querySelectorAll('.quiz-option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                
                // 标记当前选择
                this.classList.add('selected');
                
                // 检查答案
                if (this.dataset.correct === 'true') {
                    feedback.textContent = this.closest('.quiz-section').querySelector('.chinese').style.display === 'none' ? 
                                          'Correct! Great job!' : '答对了！太棒了！';
                    feedback.className = 'quiz-feedback correct';
                } else {
                    feedback.textContent = this.closest('.quiz-section').querySelector('.chinese').style.display === 'none' ? 
                                          'Try again!' : '再试一次！';
                    feedback.className = 'quiz-feedback incorrect';
                }
            });
        });
    </script>
</body>
</html>